<template>
    <div>
        <breadcrumb :title="'IP修改申请列表'" :noBack="true"></breadcrumb>
        <div class="white-block box" v-loading="loading">
            <div class="toolbar">
                <el-input v-model="appName" placeholder="输入自建系统名称" class="input mr10"></el-input>
                <el-input v-model="ip" placeholder="输入IP" class="input mr10"></el-input>
                <el-select v-model="state" placeholder="选择状态" class="mr10">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button class="primary no-radius" @click="getList">查询</el-button>
                <el-button class="minor no-radius" @click="reset()">重置</el-button>
            </div>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <template slot="userName" slot-scope="scope">
                    <span>{{scope.row.userName}}</span>
                    <div v-if="scope.row.userDept">
                        <el-button class="primary limit text" size="small">{{scope.row.userDept}}</el-button>
                    </div>
                </template>
                <template slot="ip" slot-scope="scope">
                    <p v-for="(item,index) in scope.row.ipList" :key="index">{{item}}</p>
                </template>
                <template slot="operation" slot-scope="scope">
                    <el-link type="primary" :underline="false"
                             class="mr10"
                             @click="openDetail(scope.row)">查看
                    </el-link>
                </template>
                <template slot="state" slot-scope="scope">
                    <span v-if="scope.row.state==6">审核通过</span>
                    <span v-else-if="scope.row.state==2||scope.row.state==3">待审核</span>
                    <span v-else class="error">审核不通过</span>
                </template>
            </table-example>
            <page :data="data" v-if="data" class="mt20 page" key="hotList" @jumpPage="getList"></page>
        </div>
        <transition name="slide">
            <router-view @upload="getList"></router-view>
        </transition>
    </div>
</template>

<script>
    import breadcrumb from '../../components/breadcrumb'
    import tableExample from '../../components/table'
    import page from '../../components/pagination'

    export default {

        data() {
            return {
                options: [
                    {
                        value: '',
                        label: '全部'
                    },
                    {
                        value: 2,
                        label: '待审核'
                    },
                    {
                        value: 6,
                        label: '审核通过'
                    },
                    {
                        value: 7,
                        label: '审核不通过'
                    }
                ],
                tableData: [],
                header: [
                    {
                        prop: 'applyNo',
                        label: '申请单号',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'name',
                        label: '自建系统名称',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'ip',
                        label: 'IP',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'userName',
                        label: '申请人',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'createTime',
                        label: '申请日期',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'state',
                        label: '当前状态',
                        width: '100',
                        align: 'center',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'operation',
                        label: '操作',
                        align: 'center',
                        minWidth: '25%'
                    }
                ],
                slotColumns: ['operation', 'userName', 'state', 'ip'],
                data: null,
                appName: '',
                ip: '',
                state: '',
                loading: false,
                index: 1
            }
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList(index) {
                this.loading = true
                if (index) this.index = index
                this.$http.get('/dept/workbench/getUserIpApplyPageList', {
                    current: this.index || 1,
                    size: 10,
                    state: this.state,
                    appName: this.appName,
                    ip: this.ip
                }).then(result => {
                    this.loading = false
                    if (result.success) {
                        this.tableData = result.data.records
                        this.data = result.data
                        delete this.data['records']
                    }
                    this.$method.updateView()
                }).catch(() => {
                    this.loading = false
                })
            },
            reset() {
                this.ip = ''
                this.appName = ''
                this.state = ''
                this.getList(1)
            },
            openDetail(row) {
                this.$router.push({
                    path: this.$route.path + '/detail',
                    query: {
                        id: row.id
                    }
                })
            }
        },
        components: {
            tableExample,
            breadcrumb,
            page
        }
    }
</script>

<style scoped lang="less">
    .box {
        .input {
            width: 2.8rem;
            height: 0.5rem;
            line-height: 0.5rem;
        }

        .button {
            border: none;
            background-color: #fff;
            color: #1497fc;
        }

        .page {
            /*position: absolute;*/
            margin-top: 1.11rem;
            right: 0.3rem;
            bottom: 1.14rem;
        }
    }
</style>
